window.addEventListener("load", function () {
	//【 头部移入效果】
	// $("#headerNav li")
	// console.log($("#headerNav li"));
	$("#headerNav li").forEach((v) => {
		v.addEventListener("mouseover", function () {
			$("#headerNav li").forEach((each) => {
				each.className = "";
			});
			v.className = "active";
		});
	});
	//【API渲染效果】
	let apiTypeData = [
		{ name: "全部", keyword: "身份证实名", isnew: false },
		{ name: "生活服务", keyword: "银行卡", isnew: false },
		{ name: "金融科技", keyword: "短信", isnew: false },
		{ name: "交通地理", keyword: "天气", isnew: false },
		{ name: "充值缴费", keyword: "短信", isnew: false },
		{ name: "数据智能", keyword: "手机归属地", isnew: false },
		{ name: "企业工商", keyword: "IP", isnew: false },
		{ name: "应用开发", keyword: "手机归属地", isnew: false },
		{ name: "电子商务", keyword: "IP", isnew: false },
		{ name: "吃喝玩乐", keyword: "视频", isnew: false },
		{ name: "文娱视频", keyword: "视频", isnew: false },
		{ name: "免费接口大全", keyword: "短信", isnew: true },
		{ name: "短信", keyword: "身份证实名", isnew: false },
		{ name: "汽车", keyword: "银行卡", isnew: false },
		{ name: "核验", keyword: "银行卡", isnew: false },
		{ name: "最新发布", keyword: "银行卡", isnew: true },
		{ name: "API私有化部署", keyword: "身份证实名", isnew: true },
	];
	let apiHtml = "";
	apiTypeData.forEach((v, i) => {
		if (i === 0) {
			//索引为0增加激活样式active
			apiHtml += `<li class="active" title="${v.keyword}">${v.name}</li>`;
		} else if (v.isnew) {
			//数据isnew 是true就出现字体加粗效果
			apiHtml += `<li class="fz-b" title="${v.keyword}">${v.name}</li>`;
		} else {
			//以上都没有就返回
			apiHtml += `<li title="${v.keyword}">${v.name}</li>`;
		}
	});

	$("#apiVray").innerHTML = apiHtml;

	// 【API渲染效果点击事件】
	$("#apiVray li").forEach(function (v) {
		// console.log(v);
		v.addEventListener("click", function () {
			// console.log(111);
			//下面这次循环意思是运用排空思想,循环每个li,让所有的li样式清空
			$("#apiVray li").forEach(function (each) {
				each.classList.remove("active");
			});
			v.classList.add("active");
			// console.log($(".searchMenu strong"));
			//【功能:点击API分类区的标签,联动下方的搜索框】
			// 1.将v(也就是每个li)的textContent赋值给strong
			$(".searchMenu strong").textContent = v.textContent;
			// 2.将v的title赋值给搜索框的value
			$(".searchMenu input").value = v.title;
		});
	});
	// 【子菜单的渲染】
	let searchArr = [
		//第一行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南1",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证1",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报1", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验1",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务1",
			price: "￥0.0400/次",
			isSpecial: true,
		},

		//第二行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南2",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证2",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报2", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验2",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务2",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第三行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南3",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证3",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报3", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验3",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务3",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第四行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南4",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证4",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报4", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验4",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务4",
			price: "￥0.0400/次",
			isSpecial: true,
		},
	];
	// let searchHtml = "";
	// searchArr.forEach(function (v) {
	// 	searchHtml += `<li>
	// 	<img src="../imgs/${v.img}" alt="图片已损坏" />
	// 	<p>${v.name}</p>
	// 	<p class=${v.isSpecial ? "fc-red" : "fc-green"} >${v.price}</p>
	// 	${v.isSpecial ? '<span class="abs fz-12">企业认证</span> ' : ""}
	// 	<button><a href="#" class="fc-white">立即申请</a></button>
	// </li>`;
	// });
	// $("#searchList").innerHTML = searchHtml;
	// //【翻页器点击效果】
	$("#pagingation li").forEach(function (v) {
		v.addEventListener("click", function () {
			$("#pagingation li").forEach(function (item) {
				item.classList.remove("active");
			});
			v.classList.add("active");
			render(Number(v.textContent), 5, searchArr);
		});
	});
	//封装分页渲染功能函数
	//1.实现基本功能
	//2.确定函数名 render
	//3.确定函数参数 : 当前页pagination,每页条数pageSize,总数据arr 用slice(开始索引,结束索引)
	//规律:页面1,每页5条数,总数据20条
	//开始索引:(当前页码 - 1) * 每页条数   ;  结束索引:开始索引+每页条数
	//4.确定函数返回值 ---渲染不需要返回值
	//5.将功能代码套入函数壳子,并替换对应变量
	function render(pagination, pageSize, arr) {
		// 开始索引
		let startIndex = (pagination - 1) * pageSize;
		const result = arr.slice(startIndex, startIndex + pageSize);
		let searchHtml = "";
		result.forEach(function (v) {
			searchHtml += `<li>
		<img src="../imgs/${v.img}" alt="图片已损坏" />
		<p>${v.name}</p>
		<p class=${v.isSpecial ? "fc-red" : "fc-green"} >${v.price}</p>
		${v.isSpecial ? '<span class="abs fz-12">企业认证</span> ' : ""}
		<button><a href="#" class="fc-white">立即申请</a></button>
	</li>`;
		});
		$("#searchList").innerHTML = searchHtml;
	}

	//6.调用测试
	render(1, 5, searchArr);
	//7.优化代码
	//【点击申请数据按钮弹出蒙层】
	//尾部,回到顶部功能
	//【回到顶部】
	$(".goTop").style.opacity = "0";
	this.addEventListener("scroll", function () {
		if ($(".goTop") < 3000) {
			$(".goTop").style.opacity = "0";
		} else {
			$(".goTop").style.opacity = "1";
		}
	});
	$(".goTop").addEventListener("click", function () {
		window.scroll({
			top: 0,
			left: 0,
			behavior: "smooth",
		});
	});
	// 【蒙层】
	//1.获取相关节点
	// $("#searchList")
	// $(".mask")
	//2.给祖先元素searchList绑定点击事情 ,事件委派机制
	$("#searchList").addEventListener("click", function (event) {
		//3.根据事件源的localName 属性进行区分,button || a标签
		// console.log("111");
		if (event.target.localName === "a" || event.target.localName === "button") {
			//4.弹出蒙层
			$(".mask").style.display = "block";
			document.body.style.overflow = "hidden";
			event.preventDefault(); //阻止默认跳转事件
		}
	});
	//5.点击蒙层关闭蒙层
	$(".mask").addEventListener("click", function () {
		this.style.display = "none";
		document.body.style.overflow = "auto";
	});
	//阻止点击登录框中关闭蒙层
	$(".loginModal").addEventListener("click", function (event) {
		event.stopPropagation();
	});
	//【点击两个登录框进行更换,显示对应的form表单】
	$(".loginModal form")[0].style.display = "block";
	$(".loginModalTab a").forEach(function (v, i) {
		v.addEventListener("click", function () {
			$(".loginModalTab a").forEach(function (item,index) {
				item.classList.remove("pActive");
				//获取form表单的节点,运用排他思想,将节点中的索引隐藏
				$(".loginModal form")[index].style.display = "none";
			});
			v.classList.add("pActive");
			$(".loginModal form")[i].style.display = "block";
		});
	});


	
});
